<template>
    <div class="container">
        <div class="container_bg">
            <SvgRaw class="svg_bg" name="bg" />
        </div>
        <div class="container_form_box">
            <el-form ref="formRef" :model="accountInfo" status-icon :rules="formRules">
                <h1 class="form_title">登陆</h1>
                <el-form-item class="form_input" prop="username">
                    <el-input prefix-icon="User" v-model="accountInfo.username" placeholder="用户名" />
                </el-form-item>
                <el-form-item class="form_input" prop="password">
                    <el-input prefix-icon="Lock" v-model="accountInfo.password" type="password" autocomplete="off"
                        placeholder="密码" />
                </el-form-item>
                <div class="rememberme_box">
                    <div class="rememberme_left"><input class="rememberme" type="checkbox" v-model="rememberme" />
                        <div class="rememberme_title">记住我</div>
                    </div>


                    <div class="forget_pwd">忘记密码</div>
                </div>

                <el-button class="custom_sumbit" :loading="loadingShow" :disabled="loadingShow" type="primary"
                    @click="accountAction(rememberme)">登录</el-button>
            </el-form>
        </div>

    </div>

</template>

<script lang="ts" setup>
import { Eleme } from '@element-plus/icons-vue'
import { computed, defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
// 为了拿到组件类型进行引入
import { ElForm } from "element-plus";
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import { login } from '@/api/login/index'
import { getRouters } from '@/api/menu/index'
import { useStore } from 'vuex'
const store = useStore()
// 进入或者回到登陆页需要清空登陆的信息
onMounted(() => {
    localStorage.removeItem("token");
    localStorage.removeItem("userInfo");
    localStorage.removeItem("menus");
    window.addEventListener('keydown', keyDown);
    // 记住我自动赋值
    const username = localStorage.getItem("username");
    const password = localStorage.getItem("password");
    if (username != undefined && password != undefined) {
        accountInfo.username = username;
        accountInfo.password = password;
        rememberme.value = true
    }
})

onUnmounted(() => {
    window.removeEventListener('keydown', keyDown, false)
})

const loadingShow = ref(false)

let rememberme = ref(false)

const keyDown = (e: { keyCode: number; }) => {
    //如果是回车则执行登录方法
    if (e.keyCode == 13) {
        accountAction(false)
    }
}

const accountInfo = reactive({
    password: '',
    username: '',
})

const formRules = {
    username: [{ required: true, message: "请输入账户", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
};
const router = useRouter();

// 定义表单ref
const formRef = ref<InstanceType<typeof ElForm>>();

// 账号登录
const accountAction = (isRememberPassword: boolean) => {
    // 在此验证登录(表单验证)
    formRef.value?.validate(async (value?) => {
        /**
         * 如果表单验证通过,value的值为true,否则为false
         * 在此决定是否需要登录
         */
        if (value) {
            // 1.判断是否需要记住密码
            if (isRememberPassword) {
                // 需要就进行本地缓存
                localStorage.setItem("username", accountInfo.username);
                localStorage.setItem("password", accountInfo.password);
            } else {
                // 不需要就清除相应缓存
                localStorage.removeItem("username");
                localStorage.removeItem("password");
            }
            //2.开始进行登录验证
            loadingShow.value = true;
            try {
                const res: any = await login(accountInfo);
                if (res.code == "200") {
                    const { token, userInfo } = res.data;
                    localStorage.setItem("token", token)
                    localStorage.setItem("userInfo", JSON.stringify(userInfo))
                    //登录菜单
                    const menu: any = await getRouters();
                    store.commit("setMenus", menu.data);
                    localStorage.setItem("menus", JSON.stringify(menu.data))
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                    })
                    router.push("/");

                    //登录成功之后获取菜单并添加到本地
                }
                loadingShow.value = false;
                //2.开始进行登录验证
                //   store.dispatch("loginModule/accountLoginAction", { ...accountInfo });
                // console.log({ ...accountInfo });
            } catch (err) {
                loadingShow.value = false;
            }


        }
    });
};
</script>
<style lang="less" scoped>
.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(@/assets/image/bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    & .container_bg {
        height: 450px;
        width: 380px;
        background-color: #2a78e4;
        box-shadow: 1px 1px 20px #636a71;
        padding: 15px;
        border-radius: 15px 0 0 15px;

        & .svg_bg {
            width: 380px;
            height: 450px;
        }
    }

    & .container_form_box {
        height: 450px;
        width: 380px;
        background-color: rgba(255, 255, 255, 255);
        box-shadow: 1px 1px 20px #636a71;
        padding: 15px;
        border-radius: 0 15px 15px 0;

        & .form_title {
            font-size: 25px;
            color: #636a71;
            text-align: center;
            margin: 50px 0;
            font-weight: bold;
            letter-spacing: 2px;
        }

        & .form_input {
            width: 100%;

            & .el-input {}
        }


        & .rememberme_box {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;

            & .rememberme_left {
                display: flex;
                flex-wrap: wrap;
                align-items: center;

                & .rememberme_title {
                    margin-left: 5px;
                    color: #636a71;
                    font-size: 13px;
                }

                & .rememberme {
                    margin: 10px 0;
                    color: #636a71;
                }
            }



            & .forget_pwd {
                color: #0078f6;
                font-size: 13px;
                cursor: pointer;
            }


        }

        & .custom_sumbit {
            width: 100%;
            height: 40px;
        }

    }
}

@media screen and (max-width:768px) {
    .container {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url(@/assets/image/bg.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;

        & .container_bg {
            display: none;
        }

        & .container_form_box {
            height: 350px;
            width: 280px;
            background-color: rgba(255, 255, 255, 255);
            box-shadow: 1px 1px 20px #636a71;
            padding: 15px;
            border-radius: 15px;
        }
    }
}
</style>
